<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Sumi</title>
    <style id="window-style">
      :root {
        --window-title-bar-height: 22px;
      }
    </style>
    <style>
      :root {
        --editor-background: #242526;
        --foreground: rgba(255, 255, 255, 0.65);
        --input-border: rgba(0, 0, 0, 0);
        --input-background: #16181a;
        --input-foreground: rgba(255, 255, 255, 0.65);
        --input-placeholderForeground: rgba(255, 255, 255, 0.25);
        --badge-foreground: #e9e9eb;
        --badge-background: #444;
        --scrollbar-shadow: #000000;
        --scrollbarSlider-background: rgba(255, 255, 255, 0.25);
        --scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
        --scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
        --notifications-foreground: #cccccc;
        --notifications-background: #21252b;
        --notificationLink-foreground: #3794ff;
        --notificationCenterHeader-background: #2b3038;
        --notifications-border: #2b3038;
        --notificationsErrorIcon-foreground: #f48771;
        --notificationsWarningIcon-foreground: #cca700;
        --notificationsInfoIcon-foreground: #75beff;

        /** custom token **/
        --kt-select-foreground: #d7dbde;
        --kt-select-background: #00000040;
        --kt-select-border: #00000040;
        --kt-select-placeholderForeground: #5f656b;
        --kt-select-disableBackground: #5f656b40;
        --kt-select-disableForeground: #5f656b;
        --kt-selectOption-activeBackground: #00000040;
        --kt-selectOption-activeBorder: #167cdb;
        --kt-selectDropdown-foreground: #d7dbde;
        --kt-selectDropdown-background: #35393d;
        --kt-selectDropdown-hoverBackground: #5f656b40;
        --kt-selectDropdown-selectionBackground: #203e5a;

        /** button **/
        --kt-button-disableForeground: #5f656b;
        --kt-button-disableBackground: rgba(95, 101, 107, 0.25);
        --kt-button-disableBorder: rgba(95, 101, 107, 0.5);
        --kt-primaryButton-foreground: #ffffff;
        --kt-primaryButton-background: #167cdb;
        --kt-primaryButton-hoverBackground: #3892db;
        --kt-primaryButton-clickBackground: #1a66ac;
        --kt-primaryGhostButton-foreground: #3895eb;
        --kt-primaryGhostButton-border: #3895eb;
        --kt-primaryGhostButton-clickForeground: #167cdb;
        --kt-primaryGhostButton-clickBorder: #167cdb;
        --kt-secondaryButton-foreground: #d7dbde;
        --kt-secondaryButton-border: #5f656b;
        --kt-secondaryButton-hoverForeground: #3895eb;
        --kt-secondaryButton-hoverBorder: #3895eb;
        --kt-secondaryButton-clickForeground: #167cdb;
        --kt-secondaryButton-clickBorder: #167cdb;
        --kt-whiteGhostButton-foreground: #ffffff;
        --kt-whiteGhostButton-border: #ffffff;
        --kt-whiteGhostButton-clickForeground: rgba(255, 255, 255, 0.65);
        --kt-whiteGhostButton-clickBorder: rgba(255, 255, 255, 0.65);
        --kt-whiteGhostButton-disableForeground: rgba(255, 255, 255, 0.25);
        --kt-linkButton-foreground: #3895eb;
        --kt-linkButton-hoverForeground: #67abeb;
        --kt-linkButton-clickForeground: #167cdb;
        --kt-linkButton-disableForeground: #5f656b;
        --kt-dangerButton-foreground: #ffffff;
        --kt-dangerButton-background: #db4345;
        --kt-dangerButton-hoverBackground: #f37370;
        --kt-dangerButton-clickBackground: #d21f28;
        --kt-dangerGhostButton-foreground: #db4345;
        --kt-dangerGhostButton-border: #db4345;
        --kt-dangerGhostButton-hoverForeground: #f37370;
        --kt-dangerGhostButton-hoverBorder: #f37370;
        --kt-dangerGhostButton-clickForeground: #d21f28;
        --kt-dangerGhostButton-clickBorder: #d21f28;
      }

      html {
        width: 100%;
        height: 100%;
      }

      body {
        color: var(--foreground);
        margin: 0;
        font-size: 13px;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        width: 100%;
        height: 100%;
      }

      #main {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      #loading {
        position: absolute;
        top: 0;
        width: 100vw;
        height: 100vh;
        color: rgb(90, 144, 247);
        text-align: center;
        z-index: 1;
        transition: opacity 500ms;
        font-size: 32px;
        display: flex;
        background: var(--editor-background);
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      #loading .bar {
        position: absolute;
        top: 0;
        height: 25px;
        width: 100%;
        background-color: #2b2b2b;
        z-index: 1;
        border-bottom: 1px solid #2b2b2b;
        -webkit-app-region: drag;
        user-select: none;
      }

      #loading img {
        width: 120px;
      }

      .lds-ellipsis {
        display: inline-block;
        position: relative;
        width: 64px;
        height: 64px;
      }

      .lds-ellipsis div {
        position: absolute;
        top: 27px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: rgb(90, 144, 247);
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
      }

      .lds-ellipsis div:nth-child(1) {
        left: 6px;
        animation: lds-ellipsis1 0.6s infinite;
      }

      .lds-ellipsis div:nth-child(2) {
        left: 6px;
        animation: lds-ellipsis2 0.6s infinite;
      }

      .lds-ellipsis div:nth-child(3) {
        left: 26px;
        animation: lds-ellipsis2 0.6s infinite;
      }

      .lds-ellipsis div:nth-child(4) {
        left: 45px;
        animation: lds-ellipsis3 0.6s infinite;
      }

      @keyframes lds-ellipsis1 {
        0% {
          transform: scale(0);
        }

        100% {
          transform: scale(1);
        }
      }

      @keyframes lds-ellipsis3 {
        0% {
          transform: scale(1);
        }

        100% {
          transform: scale(0);
        }
      }

      @keyframes lds-ellipsis2 {
        0% {
          transform: translate(0, 0);
        }

        100% {
          transform: translate(19px, 0);
        }
      }

      #skeleton {
        height: 100vh;
        width: 100%;
      }

      #sidebar {
        width: 210px;
        height: 100vh;
        background: #1b1f29;
      }
    </style>
  </head>

  <body>
    <div id="main">
      <div id="skeleton">
        <div id="sidebar"></div>
      </div>
    </div>
  </body>
</html>
